<!--教育救助生育-->
<template>
  <div element-loading-text="提交中">
    <el-card :body-style="{ padding: '20px' }">
      <div slot="header" class="clearfix">
        <span class="el-card-header">主申请人信息</span>
      </div>
      <el-form label-width="120px" style="width: 100%" :rules="rules" :disabled="view" size="small" ref="dataForm"
        :model="educationalSupport">
        <el-container>
          <el-main>
            <approval-user v-if="approvalKey==='EDUCATIONAL_SUPPORT_RURAL'" :showMembers="true" :approval-user="educationalSupport.approvalUser"></approval-user>
            <approval-user v-else :approval-user="educationalSupport.approvalUser"></approval-user>
            <el-row class="el-row-list el-card-user el-card-userListareacode">
              <el-col :span="24">
                <el-form-item label="户籍地址" prop="areaCode">
                  <region-selector :disabled="view" :province="region.province" :city="region.city" :area="region.area"
                    :street="region.street" :community="region.community" :hideProvince="region.city!==0" :hideCity="region.area!==0"
                    :hideArea="region.street!==0 || region.area!==0"  @region="setAreaCode">
                  </region-selector>
                  <el-input style="display:none" type="hidden" v-model="educationalSupport.areaCode"></el-input>
                  <el-input class="ptInput" size="small" v-model="educationalSupport.householdAddress" placeholder="户籍地址补充"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="户籍类型" prop="householdType">
                  <el-select class="ptInput" v-model="educationalSupport.householdType" placeholder="请选择户籍类型">
                    <el-option v-for="item in options['householdTypeEs']" :value="item.value" :label="item.label" :key="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="approvalKey!=='EDUCATIONAL_SUPPORT_FERTILITY'">
                <el-form-item label="家庭人数" prop="familyNumber">
                  <el-input class="ptInput" v-model.number="educationalSupport.familyNumber"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="现住址" prop="leastAddress">
                  <el-input class="ptInput" v-model="educationalSupport.leastAddress"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="救助对象类别" prop="supportType">
                  <el-select v-if="approvalKey!=='EDUCATIONAL_SUPPORT_FERTILITY'" class="ptInput" v-model="educationalSupport.supportType" placeholder="请选择救助对象类别">
                    <el-option v-for="item in options['supportType']" :value="item.value" :label="item.label" :key="item.value"></el-option>
                  </el-select>
                  <el-select v-else class="ptInput" v-model="educationalSupport.supportType" placeholder="请选择救助对象类别">
                    <el-option v-for="item in options['supportTypeFert']" :value="item.value" :label="item.label" :key="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="考取学校类型" prop="schoolType">
                  <el-select class="ptInput" v-model="educationalSupport.schoolType" placeholder="请选择学校类型">
                    <el-option v-for="item in options['schoolType']" :value="item.value" :label="item.label" :key="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="高考成绩" prop="score">
                  <el-input class="ptInput" v-model.number="educationalSupport.score"></el-input>
                </el-form-item>
              </el-col>

            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="准考证号" prop="admissionNumber">
                  <el-input class="ptInput" v-model="educationalSupport.admissionNumber"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="考取学校" prop="school">
                  <el-input class="ptInput" width="100%" v-model="educationalSupport.school"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="录取通知书编号" prop="admissionNoticeNumber">
                  <el-input class="ptInput" v-model="educationalSupport.admissionNoticeNumber"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-if="approvalKey==='EDUCATIONAL_SUPPORT_LOTTERY'">
              <el-col :span="8">
                <el-form-item label="专业" prop="profession">
                  <el-input class="ptInput" width="100%" v-model="educationalSupport.profession"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="政治面貌" prop="politicalStatus">
                  <el-input class="ptInput" v-model="educationalSupport.politicalStatus"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="家庭年收入" prop="annualIncome">
                  <el-input class="ptInput" v-model.number="educationalSupport.annualIncome"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-if="approvalKey==='EDUCATIONAL_SUPPORT_RURAL'">
              <el-col :span="8">
                <el-form-item label="户主姓名" prop="householder">
                  <el-input class="ptInput" v-model="educationalSupport.householder"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="户主身份证号" prop="householderIdCard">
                  <el-input class="ptInput" v-model="educationalSupport.householderIdCard"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item :label="accountNameMap[approvalKey]" prop="account">
                  <el-input class="ptInput" v-model="educationalSupport.account"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="开户行" prop="accountType">
                  <el-select class="ptInput" v-model="educationalSupport.accountType" placeholder="请选择银行">
                    <el-option v-for="item in options['bank']" :value="item.value" :label="item.label" :key="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="联系电话" prop="phone">
                  <el-input class="ptInput" v-model="educationalSupport.phone"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-main>
          <el-aside style="display: flex;align-items: center;justify-content: center;" width="190px">
            <a v-if="approvalKey==='EDUCATIONAL_SUPPORT_RURAL'" :showMembers="showMembers" @click="handleShowMembers(educationalSupport.approvalUser.idCard)">
              <img class="idCardImgItem" :src="educationalSupport.approvalUser.idCardImg">
            </a>
            <img class="idCardImgItem" v-else :src="educationalSupport.approvalUser.idCardImg">
          </el-aside>
        </el-container>
      </el-form>
      <el-form v-if="lastTask" label-width="120px" style="width: 100%" :rules="rules" size="small" ref="moneyForm"
        :model="educationalSupport">
        <el-row>
          <el-col :span="8">
            <el-form-item label="资助金额" prop="money">
              <el-input @input="editMoney" :disabled="action==='view'" v-model.number="educationalSupport.money"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card :body-style="{ padding: '20px' }" class="membersTemp com_EducationalSupport" v-if="approvalKey==='EDUCATIONAL_SUPPORT_FERTILITY' || approvalKey==='EDUCATIONAL_SUPPORT_LOTTERY'">
      <div slot="header" class="clearfix">
        <span class="el-card-header">家庭信息</span>
      </div>
      <el-table :data="educationalSupport.members">
        <el-table-column label="与学生关系">
          <template slot-scope="scope">
            <template v-if="scope.row.edit">
              <el-select style="margin-top: 36px;" size="small" v-model="scope.row.relation" placeholder="请选择">
                <el-option v-for="item in options['relation']" :value="item.value" :label="item.label" :key="item.value"></el-option>
              </el-select>
            </template>
            <span v-else>{{ scope.row.relation | mapLabel('relation') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="姓名">
          <template slot-scope="scope">
            <template v-if="scope.row.edit">
              <md-input class="edit-input" size="small" v-model="scope.row.memberName"></md-input>
            </template>
            <span v-else>{{ scope.row.memberName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="性别">
          <template slot-scope="scope">
            <template v-if="scope.row.edit">
              <el-select style="margin-top: 36px;" size="small" v-model="scope.row.sex" placeholder="请选择性别">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
            </template>
            <span v-else>{{ scope.row.sex }}</span>
          </template>
        </el-table-column>
        <el-table-column label="身份证号" width="180">
          <template slot-scope="scope">
            <template v-if="scope.row.edit">
              <md-input class="edit-input" size="small" v-model="scope.row.idCard"></md-input>
            </template>
            <el-tooltip v-else class="item" effect="dark" :content="scope.row.idCard" placement="top-start">
              <p>{{scope.row.idCard | idCardFun}}</p>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="民族">
          <template slot-scope="scope">
            <template v-if="scope.row.edit">
              <el-select style="margin-top: 36px;" size="small" v-model="scope.row.nationalityDisplay" placeholder="请选择民族">
                <el-option v-for="item in options['nationality']" :value="item.value" :label="item.label" :key="item.value"></el-option>
              </el-select>
            </template>
            <span v-else>{{ scope.row.nationalityDisplay }}</span>
          </template>
        </el-table-column>
        <el-table-column label="就业就读状况">
          <template slot-scope="scope">
            <template v-if="scope.row.edit">
              <md-input class="edit-input" size="small" v-model="scope.row.workStatus"></md-input>
            </template>
            <span v-else>{{ scope.row.workStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column label="身体状况">
          <template slot-scope="scope">
            <template v-if="scope.row.edit">
              <el-select style="margin-top: 36px;" size="small" v-model="scope.row.health" placeholder="请选择身体状况">
                <el-option v-for="item in options['health']" :value="item.value" :label="item.label" :key="item.value"></el-option>
              </el-select>
            </template>
            <span v-else>{{ scope.row.health | mapLabel('health') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="联系电话">
          <template slot-scope="scope">
            <template v-if="scope.row.edit">
              <md-input class="edit-input" size="small" v-model="scope.row.phone"></md-input>
            </template>
            <span v-else>{{ scope.row.phone }}</span>
          </template>
        </el-table-column>
        <el-table-column label="核定月收入">
          <template slot-scope="scope">
            <template v-if="scope.row.edit">
              <md-input class="edit-input" size="small" v-model="scope.row.income"></md-input>
            </template>
            <span v-else>{{ scope.row.income }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="!view" align="center" label="操作" width="150" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button v-if="scope.row.edit" type="success" @click="confirmEdit(scope)" size="small" icon="el-icon-circle-check-outline"></el-button>
            <el-button v-else type="primary" @click='scope.row.edit=!scope.row.edit' size="small" icon="el-icon-edit"></el-button>
            <el-button size="mini" v-if="scope.row.relationName!=='本人'" @click="onDeleteMembersData(scope.$index)" type="danger"
              icon="el-icon-delete"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--动态行-->
      <el-row :gutter="10" v-if="!view">
        <el-col :span="2">
          <el-select style="margin-top: 28px; border:none;" size="mini" v-model="membersTemp.relation" placeholder="关系">
            <el-option v-for="item in options['relation']" :value="item.value" :label="item.label" :key="item.value"></el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <md-input v-model="membersTemp.memberName" placeholder="请输入姓名">姓名</md-input>
        </el-col>
        <el-col :span="2">
          <el-select style="margin-top: 28px;" size="mini" v-model="membersTemp.sex" placeholder="性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-col>
        <el-col :span="3">
          <md-input v-model="membersTemp.idCard" placeholder="请输入身份证号">身份证号</md-input>
        </el-col>
        <el-col :span="2">
          <el-select style="margin-top: 28px;" size="mini" v-model="membersTemp.nationalityDisplay" placeholder="民族">
            <el-option v-for="item in options['nationality']" :value="item.value" :label="item.label" :key="item.value"></el-option>
          </el-select>
        </el-col>
        <el-col :span="3">
          <md-input v-model="membersTemp.workStatus" placeholder="输入就业就读情况">就业就读情况</md-input>
        </el-col>
        <el-col :span="3">
          <el-select style="margin-top: 28px;" size="mini" v-model="membersTemp.health" placeholder="身体状况">
            <el-option v-for="item in options['health']" :value="item.value" :label="item.label" :key="item.value"></el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <md-input v-model="membersTemp.phone" placeholder="请输入联系电话">联系电话</md-input>
        </el-col>
        <el-col :span="2">
          <md-input v-model="membersTemp.income" placeholder="请输入核定月收入">核定月收入</md-input>
        </el-col>
        <el-col :span="3">
          <div style="margin-top: 25px;">
            <el-button size="mini" plain round @click="onAddMembers">新增成员</el-button>
          </div>
        </el-col>
      </el-row>
      <el-alert v-if="memberTempError===true" :title="memberTempErrorMsg" type="error">
      </el-alert>
    </el-card>
    <electronic-data class="electronic-data" ref="electronicFiles" :view="view" :idCardInfo="idCardInfo" :files="educationalSupport.files"
      :photos="photos" :fileDefNameList="fileDefNameList"></electronic-data>

    <!--低保家庭成员-->
    <el-dialog title="家庭成员信息" :visible.sync="dialogMembersVisible" width="80%">
      <living-allowances :view="true" :living-allowances-temp="laApplicationData"></living-allowances>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogMembersVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import MdInput from "@/components/MDinput";
import ApprovalUser from "./ApprovalUser";
import ElectronicData from "./ElectronicData";
import { submitESApproval, tempStorage, queryLaByIdCard } from "@/api/reception";
import { closeCollectTag, getAgeEtc } from "@/utils/tools";
import RegionSelector from "@/components/RegionSelector";
import { packRegionCode } from "@/utils/region";
import { validateMobilePhone } from "@/utils/validate";
import LivingAllowances from "./LivingAllowances";
import { queryESDetail } from "@/api/approval";

export default {
  components: {
    MdInput,
    ApprovalUser,
    ElectronicData,
    RegionSelector,
    LivingAllowances
  },
  props: [
    "photos",
    "idCardInfo",
    "educationalSupportTemp",
    "approvalId",
    "view",
    "approvalKey",
    "lastTask",
    "action"
  ],
  data() {
    const validatePhone = (rule, value, callback) => {
      if (!validateMobilePhone(value)) {
        callback(new Error("请输入正确的手机号"));
      } else {
        callback();
      }
    };
    return {
      dialogMembersVisible: false,
      laApplicationData: null,
      showMembers: true,
      educationalSupport: {
        tempId: null,
        approvalKey: this.approvalKey,
        approvalUser: {
          idCard: null,
          sex: null,
          name: null,
          address: null,
          householdType: null,
          phone: null,
          nationalityDisplay: null,
          birthDay: null,
          distDeprt: null,
          idCardImg: null
        },
        members: [],
        areaCode: null,
        areaName: null,
        householdAddress: null,
        leastAddress: null, //现居地
        admissionNumber: null, //准考证号码
        score: null, //高考成绩
        school: null, //录取的学校
        schoolType: null, //学校类型
        schoolTypeDisplay: null, //学校类型名称
        admissionNoticeNumber: null, //录取通知书编号
        supportType: null, //救助对象类型
        supportTypeDisplay: null, //救助对象类型
        politicalStatus: null, //政治面貌
        familyNumber: null, //家庭人数
        householder: null, //户主名称
        householderIdCard: null, //户主身份证号码
        householdtype: null, //户籍类型
        householdTypeName: null, //户籍类型名称
        account: null, //银行卡号
        accountType: null, //银行开户行类型
        phone: null, //电话
        money: null, // 救助金额
        profession: null, //专业
        annualIncome: null, //家庭年收入
        files: [] //文件s
      },
      membersTemp: {
        relation: null,
        relationName: null,
        memberName: null,
        sex: null,
        idCard: null,
        nation: null,
        workStatus: null,
        health: null,
        healthDisplay: null,
        nationalityDisplay: null, //民族
        phone: null, //
        income: null //收入
      },
      memberTempError: false,
      memberTempErrorMsg: "所有信息必填",
      options: this.$store.state.dict.options,
      region: this.$store.state.user.region,
      fileDefNameList: [
        {
          label: "书面申请书",
          value: "smsqs"
        },
        {
          label: "审核审批表",
          value: "sqspb"
        },
        {
          label: "家庭经济状况核查授权委托书",
          value: "jtjjzkhcsqwts"
        },
        {
          label: "户口本",
          value: "hkb"
        },
        {
          label: "收入证明",
          value: "srzm"
        },
        {
          label: "一卡通",
          value: "ykt"
        },
        {
          label: " 残疾证",
          value: "cjz"
        },
        {
          label: "结婚证",
          value: "jhz"
        },
        {
          label: "其他",
          value: "qt"
        }
      ],
      accountNameMap: {
        EDUCATIONAL_SUPPORT_RURAL: "户主银行卡号",
        EDUCATIONAL_SUPPORT_FERTILITY: "领取人银行卡号",
        EDUCATIONAL_SUPPORT_LOTTERY: "领取人银行卡号"
      },
      rules: {
        politicalStatus: [
          { required: true, message: "请输入政治面貌", trigger: "blur" }
        ],
        areaCode: [{ required: true, message: "请选择户籍地址", trigger: "change" }],
        leastAddress: [
          { required: true, message: "请输入现住址", trigger: "blur" }
        ],
        score: [{ required: true, message: "请输入高考分数", trigger: "blur" },
          { type: 'number', message: '高考分数必须为数字值'}
        ],
        admissionNumber: [{ required: true, message: "请输入准考证号", trigger: "blur" }],
        schoolType: [
          { required: true, message: "请选择学校类型", trigger: "change" }
        ],
        school: [
          { required: true, message: "请输入学习名称", trigger: "blur" }
        ],
        admissionNoticeNumber: [
          { required: true, message: "请输入录取通知书编号", trigger: "blur" }
        ],
        supportType: [
          { required: true, message: "请选择救助对象类型", trigger: "change" }
        ],
        familyNumber: [
          { required: true, message: "请输入家庭人数", trigger: "blur" },
          { type: 'number', message: '家庭人数必须为数字值'}
        ],
        householder: [
          { required: true, message: "请输入户主名称", trigger: "blur" }
        ],
        householderIdCard: [
          { required: true, message: "请输入户主身份证号码", trigger: "blur" }
        ],
        householdType: [
          { required: true, message: "请选择户籍类型", trigger: "change" }
        ],
        account: [
          { required: true, message: "请输入银行账号", trigger: "blur" }
        ],
        accountType: [
          { required: true, message: "请选择银行类型", trigger: "change" }
        ],
        phone: [
          { required: true, message: "请输入手机号", trigger: "change" },
          { validator: validatePhone}
        ],
        annualIncome: [
          { required: true, message: "请输入家庭年收入", trigger: "blur" },{ type: 'number', message: '家庭年收入必须为数字值'}
        ],
        profession: [
          { required: true, message: "请输入专业", trigger: "blur" }
        ],
        money: [{ required: true, message: "请输入救助资金", trigger: "blur" },{ type: 'number', message: '救助资金必须为数字值'}]
      }
    };
  },
  watch: {
    'approvalId' : function(val, oldVal) {
      this.queryDetail()
    }
  },
  created() {
    let temp = this;
    if (this.idCardInfo) {
      this.educationalSupport.approvalUser = this.idCardInfo;
    }
    if(this.educationalSupportTemp){
      this.educationalSupport = this.educationalSupportTemp;
      let ageEtc = getAgeEtc(this.educationalSupport.approvalUser.idCard);
      this.educationalSupport.approvalUser.age = ageEtc.age;
      this.region = packRegionCode(this.educationalSupport.areaCode);
    }
    if (this.view) {
      this.onView();
    }
  },
  methods: {
    onView() {
      let temp = this;
      setTimeout(() => {
        temp.$refs["dataForm"].clearValidate();
      }, 10);
      if (
        this.educationalSupport.areaCode &&
        this.educationalSupport.areaCode.length > 5
      ) {
        this.region = packRegionCode(this.educationalSupport.areaCode);
      }
    },
    queryDetail(){
      queryESDetail(this.approvalId).then(res=>{
        this.educationalSupport = res.data;
        let ageEtc = getAgeEtc(this.educationalSupport.approvalUser.idCard);
        this.educationalSupport.approvalUser.age = ageEtc.age;
        this.region = packRegionCode(this.educationalSupport.areaCode);
      })
    },
    submit() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          if (
            this.approvalKey !== "EDUCATIONAL_SUPPORT_RURAL" &&
            this.educationalSupport.members.length === 0
          ) {
            this.$message({
              message: "请填写家庭成员信息",
              type: "error"
            });
            return;
          }
          this.educationalSupport.approvalUser.birthDay = new Date(
            this.educationalSupport.approvalUser.birthDay
          ).getTime();
          this.educationalSupport.communityDate = new Date(
            this.educationalSupport.communityDate
          ).getTime();
          //获取文件数据
          this.$refs.electronicFiles.toStorage();
          const loading = this.$loading({
            lock: true,
            text: "提交中",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)"
          });
          setTimeout(() => {
            loading.close();
          }, 2000);
          this.$confirm("提交后将进入审批流程, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              submitESApproval(this.educationalSupport).then(() => {
                this.resetMembersTemp();
                this.resetEducationalSupport();
                this.$notify({
                  title: "成功",
                  message: "提交成功",
                  type: "success",
                  duration: 2000
                });
                closeCollectTag(this);
                this.$router.push({ path: "/approval/joined" });
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消"
              });
            });
        }
      });
    },
    handleShowMembers(idCard) {
      queryLaByIdCard(idCard).then(res => {
        if(res.data){
          this.laApplicationData = res.data;
          this.dialogMembersVisible = true
        }else{
          this.$message.warning('无相关数据')
        }
      });
    },
    editMoney() {
      this.$emit("money", this.educationalSupport.money);
    },
    toTempStorage() {
      this.educationalSupport.communityDate = new Date(
        this.educationalSupport.communityDate
      ).getTime();
      this.educationalSupport.approvalUser.birthDay = new Date(
        this.educationalSupport.approvalUser.birthDay
      ).getTime();
      this.educationalSupport.approvalKey = this.approvalKey;
      this.educationalSupport.idCard = this.educationalSupport.approvalUser.idCard;
      this.educationalSupport.approvalUserName = this.educationalSupport.approvalUser.name;
      //获取文件数据
      this.$refs.electronicFiles.toStorage();
      const loading = this.$loading({
        lock: true,
        text: "上传中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      setTimeout(() => {
        loading.close();
      }, 2000);
      this.$confirm("准备上传数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          tempStorage(this.educationalSupport).then(() => {
            this.resetMembersTemp();
            this.resetEducationalSupport();
            this.$notify({
              title: "成功",
              message: "上传成功",
              type: "success",
              duration: 2000
            });
            closeCollectTag(this);
            this.$router.push({ path: "/temporary" });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    onAddMembers() {
      this.memberTempError = false;
      this.memberTempErrorMsg = "所有信息必填";
      this.validaMembersTemp(this.membersTemp);
      if (!this.memberTempError) {
        this.educationalSupport.members.push(this.membersTemp);
        this.resetMembersTemp();
      }
    },
    validaMembersTemp(membersTemp) {
      this.memberTempError = false;
      if (!membersTemp.relation) {
        this.memberTempError = true;
      }
      if (!membersTemp.memberName) {
        this.memberTempError = true;
      }
      if (!membersTemp.sex) {
        this.memberTempError = true;
      }
      if (!membersTemp.idCard) {
        this.memberTempError = true;
      } else {
        var regIdNo = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        if (!regIdNo.test(membersTemp.idCard)) {
          this.memberTempError = true;
          this.memberTempErrorMsg = "身份证号格式不正确";
        }
      }
      if (!membersTemp.nationalityDisplay) {
        this.memberTempError = true;
      }
      if (!membersTemp.workStatus) {
        this.memberTempError = true;
      }
      if (!membersTemp.health) {
        this.memberTempError = true;
      }
      if (!membersTemp.phone) {
        this.memberTempError = true;
      }
      if (!membersTemp.income) {
        this.memberTempError = true;
      }
    },
    onDeleteMembersData(index) {
      this.educationalSupport.members.splice(index, 1);
    },
    confirmEdit(scope) {
      this.validaMembersTemp(scope.row);
      scope.row.edit = false;
      this.$message({
        message: "修改成功",
        type: "success"
      });
    },
    setAreaCode(data) {
      if (data.code) {
        this.educationalSupport.areaCode = data.code;
        this.educationalSupport.areaName = data.value;
      }
    },
    resetMembersTemp() {
      this.membersTemp = {
        relation: null,
        relationName: null,
        memberName: null,
        sex: null,
        idCard: null,
        nation: null,
        workStatus: null,
        health: null,
        healthDisplay: null,
        nationalityDisplay: null, //民族
        phone: null, //
        income: null //收入
      };
    },
    resetEducationalSupport() {
      this.educationalSupport = {
        approvalUser: {
          idCard: null,
          sex: null,
          name: null,
          address: null,
          householdType: null,
          phone: null,
          nationalityDisplay: null,
          birthDay: null,
          distDeprt: null,
          idCardImg: null
        },
        leastAddress: null, //现居地
        admissionNumber: null, //准考证号码
        score: null, //高考成绩
        school: null, //录取的学校
        schoolType: null, //学校类型
        schoolTypeDisplay: null, //学校类型名称
        admissionNoticeNumber: null, //录取通知书编号
        supportType: null, //救助对象类型
        supportTypeDisplay: null, //救助对象类型
        politicalStatus: null, //政治面貌
        familyNumber: null, //家庭人数
        householder: null, //户主名称
        householderIdCard: null, //户主身份证号码
        householdtype: null, //户籍类型
        householdTypeName: null, //户籍类型名称
        account: null, //银行卡号
        accountType: null, //银行开户行类型
        phone: null, //电话
        money: null, // 救助金额
        profession: null, //专业
        annualIncome: null, //家庭年收入
        files: [] //文件s
      };
    }
  }
};
</script>
<style>
.el-input.is-disabled .el-input__inner  {
  background-color: #fff;
  border-color: #e4e7ed;
  border: none;
  color: #000 !important;
  cursor: not-allowed;
}

.el-textarea.is-disabled .el-textarea__inner{
  background-color: #fff;
  border: none;
  border-color: #e4e7ed;
  color: #000 !important;
  cursor: not-allowed;
}

.person-info {
  padding: 20px;
  display: flex;
}

.person-info img {
  width: 100px;
  height: 100%;
}

.person-info .info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  float: left;
  margin-left: 25px;
  color: #666;
}

.info .info-row {
  display: flex;
  justify-content: space-between;
}

.info-row .name {
  font-size: 24px;
  font-weight: 600;
  padding-right: 15px;
  color: #f8ac59;
  display: inline-block;
}

.info .info-row .info-item {
  flex-grow: 1;
}

.info .info-row .info-item .info-lable {
  font-size: 14px;
  padding-right: 5px;
  display: inline-block;
  color: #b7b7b7;
}

.info .info-row .info-item .info-content {
  font-size: 16px;
  padding-right: 5px;
  display: inline-block;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.idCardImgItem {
  width: 140px;
  height: 178px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 98px;
  height: 98px;
  line-height: 98px;
  text-align: center;
}

.avatar {
  width: 98px;
  height: 98px;
  display: block;
}

.members::after {
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}

.el-form input {
  width: 100%;
}

.membersTemp input {
  border: none;
}

.membersTemp,
.electronic-data {
  margin-bottom: 20px;
  margin-top: 20px;
}
</style>
